<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { isEqual } from 'lodash-es'
import { doSaveOSS, doGetOSS } from '@/apis/setting'
import { Select, InfoFilled } from '@element-plus/icons-vue'
import { enumServerFormCn } from '@/views/set/components/fileSet'
type ServeType = 'TENCENT' | 'QUIDWAY' | 'QINIUO' | 'ALIYUN' | 'MINIO' | 'LOCAL'

const enumServerForm = reactive([
    // 腾讯云
    {
        type: 'TENCENT',
        // 域名
        qcloudDomain: '',
        // 前缀
        qcloudPrefix: '',
        // appid
        qcloudAppId: '',
        // SecretId"
        qcloudSecretId: '',
        // SecretKey
        qcloudSecretKey: '',
        // BucketName"
        qcloudBucketName: '',
        // 腾讯云COS所属地区
        qcloudRegion: '',
    },
    // 华为云
    {
        type: 'QUIDWAY',
        // 华为appid
        quidwayAccessKeyId: '',
        // SecretId
        quidwayAccessKeySecret: '',
        // endPoint
        quidwayEndpoint: '',
        // bucketname
        obsBucketName: '',
        // 域名
        quidwayDomain: '',
        // 前缀
        quidwayPrefix: '',
    },
    //   七牛
    {
        type: 'QINIUO',
        // 域名
        qiniuDomain: '',
        // 前缀
        qiniuPrefix: '',
        // AccessKey
        qiniuAccessKey: '',
        // SecretKey
        qiniuSecretKey: '',
        // 桶
        qiniuBucketName: '',
    },
    //阿里云
    {
        type: 'ALIYUN',
        // 域名
        aliyunDomain: '',
        // 前缀
        aliyunPrefix: '',
        // endPoint
        aliyunEndPoint: '',
        // AccessKeyId
        aliyunAccessKeyId: '',
        // AccessKeySecret
        aliyunAccessKeySecret: '',
        // BucketName"
        aliyunBucketName: '',
    },
    //minio
    {
        type: 'MINIO', //类型
        minioAccessKey: '', //key
        minioSecretKey: '', //秘钥
        minioEndPoint: '', //端点
        minioBucketName: '', //bucket
        minioDomain: '', //域名
    },
    //local
    {
        type: 'LOCAL',
        localDomain: '', //域名
        localStoragePath: '', //存储路径
    },
])

const currentRadio = ref<keyof typeof widthMap>('TENCENT')
const currentRadioList = ref<any[]>([
    {
        name: 'TENCENT',
        title: '腾讯',
    },
    {
        name: 'QUIDWAY',
        title: '华为',
    },
    {
        name: 'QINIUO',
        title: '七牛',
    },
    {
        name: 'ALIYUN',
        title: '阿里',
    },
    {
        name: 'MINIO',
        title: 'MINO',
    },
    {
        name: 'LOCAL',
        title: '本地',
    },
])
const currentForm = computed(() => {
    return enumServerForm.filter((item) => item.type === currentRadio.value)[0]
})
const using = ref('')

watch(
    () => currentRadio.value,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            localStorage.setItem('curRadio', currentRadio.value)
        }
    },
)
onMounted(() => {
    if (localStorage.getItem('curRadio') !== currentRadio.value) {
        if (localStorage.getItem('curRadio')) {
            currentRadio.value = localStorage.getItem('curRadio')
        } else {
            currentRadio.value = 'TENCENT'
        }
        initForm(currentRadio.value)
    } else {
        initForm('TENCENT')
    }
})

const validFormat = () => {
    const current = { ...toRaw(currentForm.value) }
    Reflect.deleteProperty(current, 'type')
    if (isEqual(current, originData) && using.value === currentRadio.value) {
        ElMessage.error('内容未更改，请更改后提交')
        return false
    }
    if (Object.values(currentForm.value).includes('')) {
        ElMessage.error('请填写完成表单')
        return false
    }
    return true
}
const submitHandle = async () => {
    if (!validFormat()) return
    const { code, success } = await doSaveOSS(currentForm.value)
    if (code === 200 && success) {
        ElMessage.success('保存成功')
        initForm(currentRadio.value)
    } else {
        ElMessage.error('保存失败')
    }
}
let originData: any
async function initForm(val: any) {
    const { code, data, success } = await doGetOSS(val?.props?.name ? val?.props?.name : val)
    if (code === 200 && success) {
        using.value = data.using
        switch (currentRadio.value as ServeType) {
            case 'TENCENT':
                enumServerForm[0] = { ...enumServerForm[0], ...data.conf }
                break
            case 'QUIDWAY':
                enumServerForm[1] = { ...enumServerForm[1], ...data.conf }
                break
            case 'QINIUO':
                enumServerForm[2] = { ...enumServerForm[2], ...data.conf }
                break
            case 'ALIYUN':
                enumServerForm[3] = { ...enumServerForm[3], ...data.conf }
                break
            case 'MINIO':
                enumServerForm[4] = { ...enumServerForm[4], ...data.conf }
                break
            case 'LOCAL':
                enumServerForm[5] = { ...enumServerForm[5], ...data.conf }
                break
            default:
                break
        }
        originData = { ...data.conf }

        // currentForm = data;
        // let current = enumServerForm.find((item) => item.type === data.type)
        // current = data
    }
}

/**
 * 映射每个表单label的宽度
 */
const widthMap = {
    TENCENT: '240px',
    QUIDWAY: '210px',
    QINIUO: '180px',
    ALIYUN: '230px',
    MINIO: '160px',
    LOCAL: '170px',
} as const
</script>

<template>
    <div class="content_container">
        <el-tabs v-model="currentRadio" tab-position="left" class="demo-tabs" style="height: 350px" @tab-click="initForm">
            <el-tab-pane v-for="item in currentRadioList" :key="item.name" :label="item.title" :name="item.name">
                <template #label>
                    <span class="custom-tabs-label">
                        <span>{{ item.title }}</span>
                        <i v-if="item.name === currentRadio" class="iconfont icon-dui-copy" style="font-size: 18px; position: relative; top: 1px"></i>
                    </span>
                </template>
                <el-form label-width="250px">
                    <div v-for="(val, key, index) in currentForm" :key="index" :data-val="val" class="form-container">
                        <el-form-item
                            v-if="key !== 'type'"
                            :prop="key"
                            :label-width="widthMap[currentRadio as keyof typeof widthMap]"
                            :rules="[
                                {
                                    required: true,
                                    message: '',
                                    trigger: 'blur',
                                },
                            ]"
                        >
                            <template #label>
                                {{ enumServerFormCn[key as keyof typeof enumServerFormCn].name }}
                                <span v-if="enumServerFormCn[key as keyof typeof enumServerFormCn]?.info">
                                    ({{ enumServerFormCn[key as keyof typeof enumServerFormCn].info }})
                                </span>
                            </template>
                            <el-input
                                v-model="currentForm[key]"
                                class="cusInput"
                                :placeholder="enumServerFormCn[key as keyof typeof enumServerFormCn].placeholder"
                            />
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>

    <div class="preservation">
        <el-button type="primary" @click="submitHandle">保存</el-button>
    </div>
</template>

<style lang="scss" scoped>
@include b(cusInput) {
    width: 300px;
    height: 30px;
}
@include b(btn-icon) {
    position: absolute;
    inset: 0;
}

@include b(text-color) {
    position: relative;
    color: #fff;
    background-color: transparent;
    z-index: 3;
}

@include b(active) {
    background-color: #409eff;
    color: #fff;
    @include b(el-icon) {
        position: absolute;
        top: 0;
        right: 0;
    }
}

@include b(el-radio-group) {
    :deep(.el-radio-button__inner) {
        --el-radio-button-checked-text-color: --el-text-color-regular;
        --el-radio-button-checked-bg-color: #fff;
    }
}

@include b(el-form-item) {
    :deep(.el-form-item__label) {
        justify-content: flex-end;
        display: flex;
        align-items: center;
    }
}

@include b(label-icon) {
    margin: 0 5px;
    font-size: 18px;
    cursor: pointer;
}

.group {
    margin-bottom: 20px;
}
@include b(custom-tabs-label) {
    width: 45px;
    text-align: left;
}
@include b(preservation) {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 52px;
    align-items: center;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
}
</style>
